<template>
	<view>
	

		<view class="box">
			<image class="box" src="../../../static/hdboxbj.png" mode=""></image>
			<view class="box1">
				<image :src="data.thumb" mode=""></image>
				<view class="box1-1">
					<view class="box1-1-1">
						<view class="box1-1-1biao" :style="data.price>0?'background-image: url(../../../static/huodbiao1.png);':''">
							{{data.price>0?'付费':'公益'}}
						</view>
						<view class="box1-1-1text">
							{{data.title}}
						</view>
						<view class="box1-1-1text1">
							进行中
						</view>
					</view>
					<view class="box1-1-2">
						<image src="../../../static/hdsz.png" mode=""></image>
						<view class="box1-1-2text">
							报名时间：{{data.stime}}-{{data.etime}}
						</view>
					</view>
					<view class="box1-1-2text" style="color: #999999; padding-top: 12rpx; font-size: 26rpx;">
						{{data.desc}}
					</view>
					
				</view>
			</view>
		</view>
		<view class="biaozhu">
			<text style="color: #FF7200;">*</text>为确保您获得最佳的活动体验，请填写真实的个人信息
		</view>
		<view class="center">
			<view class="title1">
				手机号码
			</view>
			<view class="shurk">
				<input class="inp" type="text" v-model="phone">
			</view>
			<view class="title1">
				真实姓名
			</view>
			<view class="shurk">
				<input class="inp" type="text" v-model="name">
			</view>
			<view class="title1">
				房产信息
			</view>
			<view class="shurk">
				<picker mode="selector" :range="roomlist" range-key="roomname" @change="setroomid">
					<view class="inp" style="width:600rpx; line-height: 54rpx;">{{roomtitle}}</view>
				</picker>
				<image src="/static/xxfh.png" mode=""></image>
			</view>

			<view class="tiaokuan">
				<view class="tiaokuan-image" :style="checked?'':'background-color: black;'" @click="checked=!checked">
					<image src="../../../static/hd.png" mode="widthFix" style="width:100%"></image>
				</view>
				
				<view class="view">
					我已经阅读、理解并同意 
					<text class="blue" @click="openpage('tiaokuan')">使用条款</text>、
					<text class="blue" @click="openpage('mianze')">免责承诺书</text> 和 
					<text class="blue" @click="openpage('yinsi')">隐私条款</text>
				</view>
			</view>


			<view class="bottomx" @click="upactivity">
				下一步
			</view>
			
			
			<uni-popup ref="popup" type="bottom">
				<view class="content-pop">
					<view class="title">{{popdata.title}}</view>
					<view  v-html="popdata.content">
						
					</view>
				</view>
				
			</uni-popup>



		</view>

<box ref="box"></box>

	</view>
</template>

<script>
	var that;
	//我的活动详情
	export default {
		data() {
			return {
				bartop: 0,
				titles: 0,
				phone:'',
				name:'',
				roomId:'',
				roomlist:[],
				roomtitle:'请选择房产信息',
				data:{},
				id:'',
				checked:true,
				popdata:''
			}
		},
		onLoad(e) {
			that = this;
			this.bartop = this.$bartop;
			that.id = e.id;
		},
		onShow() {
			that.initbaoxiu()
		},
		methods: {
			openpage(name){
				uni.showLoading({
					title:'正在加载'
				})
				that.$post('api/getonepage',{name:name}).then(res=>{
					uni.hideLoading()
					that.popdata = res.data;
					that.$refs.popup.open('bottom');
				})
			},
			upactivity(){
				var data = {
					hid:that.id,
					phone:that.phone,
					roomId:that.roomId,
					name:that.name
				}
				if(!that.checked){
					uni.showToast({
						title:'您未同意条款',
						icon:'error'
					})
					return false;
				}
				if(!data.phone){
					uni.showToast({
						title:'请输入手机号',
						icon:'error'
					})
					return false;
				}
				if(!data.name){
					uni.showToast({
						title:'请输入姓名',
						icon:'error'
					})
					return false;
				}
				if(!data.roomId){
					uni.showToast({
						title:'请选择房产',
						icon:'error'
					})
					return false;
				}
				uni.showLoading({
					title:'加载中...'
				})
				that.$post('center/upactivity',data).then(res=>{
					uni.hideLoading()
					if(res.code===0){
						uni.showModal({
							title:'报名提示',
							content:res.msg,
							showCancel:false,
							success() {
								uni.navigateBack()
							}
						})
					}else{
						uni.showToast({
							title:res.msg
						})
					}
				})
			},
			getdata(){
				uni.showLoading({
					title:'加载中...'
				})
				that.$post('api/gethuodong',{id:that.id}).then(res=>{
					uni.hideLoading()
					that.data = res.data;
				})
			},
			setroomid(e){
				var index = e ? e.detail.value : 0;
				that.roomtitle = that.roomlist[index].roomname;
				that.roomId = that.roomlist[index].roomId;
			},
			initbaoxiu(){
				that.$post('center/initbaoxiu',{type:2}).then(res=>{
					that.phone = res.data.user.phone;
					that.name = res.data.user.name;
					that.roomlist = res.data.roomlist;
					
					
					if(that.roomlist.length==0){
						var box = {
							isshow:true,
							title:'请绑定房产',
							content:'请先进行房产绑定',
							content2:'然后进行数据录入',
							btntitle:'去绑定',
							path:'/pages/fangchanbangding/fangchanbangding',
							type:2
						}
						that.$refs.box.open(box);
						return false;
					}
					that.getdata();
				})
			}
		}
	}
</script>

<style lang="scss">
	.title{
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 20rpx;
	}
	.content-pop{
			width: 100vw;
			min-height: 50vh;
			background-color: #FFFFFF;
			border-radius:25upx 25upx 0 0;
			padding:20rpx;
			overflow-y: scroll;
		}
	.blue{
		color: blue;
	}
	.box {
		margin: 20rpx auto;
		width: 689rpx;
		height: 243rpx;

		.box1 {
			width: 689rpx;
			margin: 0 auto;
			margin-top: -250rpx;
			display: flex;

			>image {
				margin-left: 20rpx;
				width: 200rpx;
				height: 200rpx;
			}

			.box1-1 {
				margin-left: 20rpx;

				.box1-1-1 {
					display: flex;
					align-items: center;

					.box1-1-1biao {
						margin-right: 20rpx;
						background-image: url('../../../static/huodbiao.png');
						background-size: 60rpx;
						width: 60rpx;
						height: 25rpx;
						font-size: 18rpx;
						text-align: center;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #FFFFFF;
						text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
					}

					.box1-1-1text {
						width: 300rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #333333;
					}

					.box1-1-1text1 {
						margin-left: 20rpx;
						transform: rotate(45deg);
						font-size: 18rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #FFFFFF;
						white-space: nowrap;
					}
				}

				.box1-1-2 {
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					>image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 20rpx;
					}

					.box1-1-2text {
						font-size: 24rpx;
					
						color: #999999;
					}
				}

				.box1-1-3 {
					display: flex;
					flex-direction: row-reverse;
					margin-top: 80rpx;

					.box1-1-3ann {
						margin-right: 20rpx;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						line-height: 52rpx;
						text-align: center;
						color: #FFFFFF;
						width: 138rpx;
						height: 52rpx;
						background-color: rgb(255, 174, 69);
						border-radius: 26rpx;
					}
				}
			}
		}
	}

	.biaozhu {
		margin: 20rpx auto;
		width: 660rpx;
		font-size: 18rpx;
		
		color: #999999;
	}

	.center {
		margin: 20rpx auto;
		width: 660rpx;
	}

	.title1 {
		margin: 30rpx 0;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 600;
		color: #000000;
	}

	.shurk {
		width: 660rpx;
		height: 95rpx;
		background-color: #cecece;
		border-radius: 15rpx;
		display: flex;
		align-items: center;

		>image {
			width: 26rpx;
			height: 15rpx;
		}

		.inp {
			width: 560rpx;
			height: 54rpx;
			font-size: 32rpx;
			line-height: 32rpx;
			padding: 0rpx 20rpx;
		}
	}

	.tiaokuan {
		margin: 40rpx 0;
		display: flex;

		&-image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			// background-color: #000000;
			border-radius: 50%;
			overflow: hidden;
		}

		.view {
			font-size: 24rpx;
			color: #000000;
			line-height: 36rpx;
		}
	}

	.bottomx {
		background-color: rgb(255, 174, 69);
		width: 660rpx;
		height: 120rpx;
		border-radius: 60rpx;
		font-size: 36rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 120rpx;
		text-align: center;
	}
</style>
